<template>
	<view class="category-detail">
		<!-- 头部导航 -->

		<u-navbar :title="categoryName" :autoBack="true" fixed placeholder />
		<!-- 筛选栏 -->
		<u-sticky :offsetTop="navbarHeight">
			<view class="filter-bar">
				<view class="filter-tabs">
					<view
						v-for="(tab, index) in filterTabs"
						:key="index"
						:class="['tab-item', { active: currentTab === index }]"
						@click="handleTabClick(index)"
					>
						{{ tab.name }}
						<u-icon name="arrow-up" v-if="tab.sort == 'asc'"></u-icon>
						<u-icon name="arrow-down" v-else></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>

		<!-- 内容列表 -->
		<view class="content-list">
			<view class="content-item" v-for="(item, index) in contentList" :key="index" @click="handleItemClick(item)">
				<view class="cover">
					<img :src="item.coverUrl" mode="aspectFill" />
				</view>
				<view class="info">
					<view class="title">{{ item.title }}</view>
					<view class="desc">{{ item.description }}</view>
					<view class="meta">
						<view class="episode">
							<u-icon name="server-fill" size="16" color="#999"></u-icon>
							<text>{{ formatViewCount(item.playCount) }}</text>
						</view>
						<view class="author">
							<u-icon name="eye-fill" size="16" color="#999"></u-icon>
							<text>{{ item.episodeCount }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { formatViewCount } from '../../utils/format.js';
export default {
	data() {
		return {
			categoryName: '有声书',
			currentTab: 0,
			filterTabs: [
				{ filed: 'views', name: '综合排序', sort: 'asc' },
				{ filed: 'year', name: '最近更新', sort: 'asc' },
				{ filed: 'playnum', name: '播放最多', sort: 'asc' }
			],
			orderby: { filed: 'views', name: '综合排序', sort: 'asc' },
			contentList: [],
			page: 1,
			cate_id: 1,
			navbarHeight: 0
		};
	},
	onLoad(options) {
		this.cate_id = options.cate_id;
		this.categoryName = options.name;
		console.log(options);
		// 计算 navbar 的实际高度
		const systemInfo = uni.getSystemInfoSync();
		const statusBarHeight = systemInfo.statusBarHeight;
		const navbarContentHeight = 44; // navbar 内容的高度，可能需要根据实际情况调整
		this.navbarHeight = statusBarHeight + navbarContentHeight;
	},
	onShow() {
		this.getContentList();
	},
	onReachBottom() {
		console.log('触发上拉加载');
		this.page++;
		this.getContentList();
	},
	methods: {
		getContentList() {
			let PostData = {
				ac: 'getbookslist',
				cate_id: this.cate_id,
				page: this.page,
				filed: this.orderby.filed,
				sort: this.orderby.sort
			};
			uni.$u.http.post('', PostData).then((res) => {
				let newList = res.map((item) => {
					return {
						id: item.id,
						title: item.title.split(' by ')[0].trim(),
						description: item.description,
						playCount: item.playnum,
						episodeCount: item.views,
						coverUrl: item.cover_url
					};
				});
				this.contentList = [...this.contentList, ...newList];
			});
		},
		handleItemClick(item) {
			console.log(item);
			uni.navigateTo({
				url: `/pages/album/detail?id=${item.id}`
			});
		},
		handleTabClick(index) {
			this.currentTab = index;
			let that = this;
			this.filterTabs.forEach((tab, i) => {
				if (i === index) {
					if (tab.sort == 'asc') {
						tab.sort = 'desc';
					} else if (tab.sort == 'desc') {
						tab.sort = 'asc';
					}
					that.orderby = tab;
				}
			});
			this.page = 1;
			this.contentList = [];
			this.getContentList();
		},
		formatViewCount
	}
};
</script>

<style scoped lang="scss">
// 首先定义 mixin
@mixin text-ellipsis($lines: 1) {
	@if $lines == 1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	} @else {
		display: -webkit-box;
		-webkit-line-clamp: $lines;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

.category-detail {
	min-height: 100vh;
	background: #f7f7f7;
}

.filter-bar {
	height: 44px;
	background: #fff;
	z-index: 99;
	border-bottom: 0.5px solid #eee;

	.filter-tabs {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.tab-item {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #666;
			padding: 0 15px;

			&.active {
				color: #ff4055;
			}

			.icon-arrow {
				width: 12px;
				height: 12px;
				margin-left: 3px;
				transition: transform 0.3s;

				&.up {
					transform: rotate(180deg);
				}
			}
		}
	}
}

.content-list {
	.content-item {
		display: flex;
		padding: 12px;
		background: #fff;
		border-radius: 8px;
		margin-bottom: 10px;

		.cover {
			position: relative;
			width: 100px;
			height: 100px;
			border-radius: 4px;
			overflow: hidden;
			margin-right: 12px;
			flex-shrink: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

			.title {
				font-size: 18px;
				font-weight: 500;
				margin-bottom: 6px;
				@include text-ellipsis;
			}

			.desc {
				font-size: 13px;
				color: #999;
				line-height: 1.3;
				margin-bottom: 6px;
				@include text-ellipsis(2);
			}

			.meta {
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #999;
				gap: 30rpx;
				view {
					display: flex;
					align-items: center;
					gap: 4px;
				}
			}
		}
	}
}
</style>
